<template>
	<!--新增对话框-->
	<el-dialog
		:title="editForm.id ? '编辑组件信息' : '新增组件信息'"
		:visible.sync="dialogVisible"
		width="600px"
		:before-close="handleClose"
	>
		<el-form :model="editForm" :rules="editFormRules" ref="editForm" label-width="100px" class="demo-editForm">
			<el-form-item label="组件类型" prop="com_type" label-width="100px">
				<el-select v-model="editForm.com_type" placeholder="请选择">
					<el-option v-for="item in comTypeList" :key="item.label" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="组件内容" prop="com_view" label-width="100px">
				<el-input v-model="editForm.com_view" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="位置" prop="position" label-width="100px">
				<el-select v-model="editForm.position" placeholder="请选择">
					<el-option v-for="item in positionList" :key="item.label" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="排序序号" prop="sort_value" label-width="100px">
				<el-input v-model="editForm.sort_value" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="触发类型" prop="trigger_type" label-width="100px">
				<el-select v-model="editForm.trigger_type" placeholder="请选择">
					<el-option
						v-for="item in triggerTypeList"
						:key="item.label"
						:label="item.label"
						:value="item.value"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="组件触发值" prop="trigger_value" label-width="100px">
				<el-input v-model="editForm.trigger_value" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('editForm')">立即创建</el-button>
				<el-button @click="resetForm('editForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script>
export default {
	name: 'AddElement',
	data() {
		return {
			editForm: {},
			editFormRules: {
				com_type: [{ required: true, message: '请选择组件类型', trigger: 'blur' }],
				com_view: [{ required: true, message: '请输入组件内容', trigger: 'blur' }],
				position: [{ required: true, message: '请选择组件位置', trigger: 'blur' }],
				sort_value: [{ required: true, message: '请输入排序序号', trigger: 'blur' }],
				trigger_type: [{ required: true, message: '请选择组件触发类型', trigger: 'blur' }],
			},
			dialogVisible: false,
			notice_text_id: '',
			comTypeList: [
				{ value: 'IMAGE', label: '图片' },
				{ value: 'BUTTON', label: '按钮' },
			],
			positionList: [
				{ value: 'TOP', label: '上' },
				{ value: 'CENTER', label: '中' },
				{ value: 'BOTTOM', label: '下' },
			],
			triggerTypeList: [
				{ value: 'THIRD_APP', label: '第三方APP' },
				{ value: 'CANCEL', label: '取消' },
				{ value: 'URL', label: 'url跳转' },
				{ value: 'NONE', label: '无' },
			],
		};
	},
	methods: {
		resetForm(formName) {
			this.$refs[formName].resetFields();
			this.dialogVisible = false;
			this.editForm = {};
		},
		handleClose() {
			this.resetForm('editForm');
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					console.log(this.editForm);
					const info = {
						com_save_request_list: [this.editForm],
						notice_text_id: this.notice_text_id,
					};
					this.$axios.post('/notice/saveTextCom', info).then((res) => {
						this.$message({
							showClose: true,
							message: '恭喜你，操作成功',
							type: 'success',
							onClose: () => {
								this.$emit('refreshDataList');
							},
						});
						this.dialogVisible = false;
						this.resetForm(formName);
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
		init(id) {
			this.dialogVisible = true;
			this.notice_text_id = id;
		},
		edit(item) {
			this.dialogVisible = true;
			this.editForm = JSON.parse(JSON.stringify(item));
			this.notice_text_id = this.editForm.notice_text_id;
			this.editForm.notice_text_id = undefined;
		},
	},
};
</script>

<style scoped></style>
